<template>
  <div>
    <!-- 公众号设置 -->
    <el-col :span="24" style=" margin-top: 10px;">
      <h2 style="font-weight: 300; margin-left: 20px; font-size: 22px;">
        公众号设置
      </h2>
      <!-- 预览功能 -->

      <div class="flex" v-if="openpreview"></div>
      <div class="preview" v-if="openpreview">
        <div class="previewcon">
          <img class="previewimg" :src="previewimg" />
          <div class="previewtextbot">
            <div
              class="previewli"
              :class="{
                previewlione: list.length == 1,
                previewlitwo: list.length == 2
              }"
              v-if="list.length !== 0"
              v-for="(item, indx) in list"
              :key="indx"
            >
              <!-- 展示二级菜单 -->
              <div class="previewtianjia" v-if="previewtext == indx">
                <a
                  class="previewaddadd"
                  v-for="(item, index) in item.menuDTOList"
                  :href="item.url"
                  target="view_window"
                  :key="index"
                  >{{ item.menuName }}</a
                >
                <div
                  class="previewarrow"
                  v-if="item.menuDTOList && item.menuDTOList.length > 0"
                ></div>
              </div>
              <!-- 展示一级菜单， 并且含有二级 -->
              <div
                class="previewtext"
                v-if="item.menuDTOList && item.menuDTOList.length > 0"
                @click="preview(item, indx)"
              >
                {{ item.menuName }}
              </div>
              <!-- 展示一级菜单，不含有二级 -->
              <a
                class="previewtext"
                v-if="!item.menuDTOList"
                :href="item.url ? item.url : 'javascript:void(0)'"
                target="view_window"
                >{{ item.menuName }}</a
              >
            </div>
          </div>
        </div>
        <el-button
          type="primary"
          style="display: block;margin: 10px auto;"
          @click="out"
          >退出预览</el-button
        >
      </div>

      <!-- <el-col :span="12" :offset="6">
<div class="grid-content bg-purple warning">
<p>
<i class="el-icon-warning tips"></i>温馨提示:
<span class="on">立即授权</span>
</p>
<p>微信公众号提现需要特约商户签约，材料交给我们代为提交。签约费用500元</p>
</div>
</el-col> -->
      <el-col :span="24" style=" margin-top: 30px;">
        <el-col :span="5" class="left">
          <p class="top" style="display: inline-block;">
            <span>
              邦凝分类回收
            </span>
            <img :src="top" />
          </p>

          <span
            style="position: absolute; bottom: -3px; border: 1px solid #e7e7eb;
              padding: 8px 0 0 1.5px;
              box-sizing: border-box;
            display: inline-block; background: #fafafa; width:  36px; height: 52px;"
          >
            <img class="bottom" :src="bottom" />
          </span>

          <div
            style="background: #F4F5F9; min-height: 438px; position: absolute;
         top: 63px; width: 320px; "
          ></div>
          <div class="textbot">
            <div
              v-if="list.length !== 0"
              class="li"
              v-for="(item, indx) in list"
              :key="indx"
            >
              <div v-if="activeClass == indx">
                <div class="add" @click="add(indx)">
                  <i class="el-icon-plus"></i>
                  <div class="arrow"></div>
                </div>
                <div class="tianjia">
                  <!-- 二级菜单 -->
                  <div
                    class="addadd"
                    v-for="(item, index) in item.menuDTOList"
                    :key="index"
                    :class="addindex == index ? 'active' : ''"
                    @click="gettem(item, index)"
                  >
                    {{ item.menuName }}
                  </div>
                </div>
              </div>
              <!-- 一级菜单 -->
              <div
                class="text"
                :class="activeClass == indx ? 'active' : ''"
                @click="getItem(item, indx)"
              >
                {{ item.menuName }}
              </div>
            </div>
            <!-- 添加按钮 -->
            <div class="li" v-if="list.length < 3">
              <div class="text" @click="addtext">
                <i class="el-icon-plus"></i>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="15" style=" padding-left: 20px;">
          <el-card class="box-card right">
            <div slot="header" class="clearfix">
              <span>{{ input }}</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="delet"
                v-if="wmmPermissions.includes('wx:menu:delete')"
                >{{ deleteName }}</el-button
              >
              <el-button
                style="float: right; padding: 3px 0; margin-right: 10px;"
                type="text"
                @click="publish"
                v-if="wmmPermissions.includes('wx:menu:publish')"
                >发布</el-button
              >
            </div>
            <div style="display: flex;">
              <label style="line-height: 34px; width:80px;">菜单名称</label>
              <el-input
                v-model="form.menuName"
                placeholder="请输入内容"
                style="width:70%;"
              ></el-input>
            </div>
            <p style="color: #9A8D8D;margin-left: 80px;">
              仅支持中英文和数字，字数不超过4个汉字或8个字母
            </p>
            <div style="display: flex;">
              <label style="line-height: 34px; width:80px;">菜单类型</label>
              <el-radio-group
                @change="changeType"
                v-model="radio"
                style="line-height: 45px;"
              >
                <!-- <el-radio :label="1">平台模板</el-radio> -->
                <el-radio :label="'view'">网页类型</el-radio>
                <el-radio :label="'miniprogram'">小程序类型</el-radio>
                <el-radio :label="'click'">点击类型</el-radio>
              </el-radio-group>
            </div>
            <div
              style="background: #fff;padding:10px 0;"
              v-if="radio == 'view'"
            >
              <el-radio-group
                v-model="radiobottom"
                style="padding:0 30px; width: 300px;"
                class="link"
              >
                <p
                  style="margin: 10px 0;"
                  v-if="listlist.length !== 0 && show1"
                  v-for="(item, index) in listlist"
                  :key="index"
                >
                  <!-- <el-radio :label="index"
                    >{{ item.name }}{{ item.http }}</el-radio
                  > -->
                  <el-radio
                    :disabled="radiobottom == index ? false : true"
                    style="width: 100%;"
                    :label="index"
                    ><span style="display: inline-block; width: 100px;">
                      {{ item.name }} </span
                    ><input
                      :disabled="radiobottom == index ? false : true"
                      v-if="!item.menuDTOList"
                      type="text"
                      style="outline-style: none;
                      	border:1px solid #bbb;
                         width: 100%; height: 30px;
                        padding-left:10px; 
                         box-sizing: border-box;
                         border-radius: 4px;
                         "
                      v-model="item.http"
                    />
                  </el-radio>
                </p>
              </el-radio-group>

              <p
                v-if="show2"
                style="margin: 8px 0px; width: 300px; padding:0 30px;"
              >
                <label
                  role="radio"
                  aria-checked="true"
                  tabindex="0"
                  class="el-radio is-checked"
                  style="width: 100%;"
                >
                  <span class="el-radio__input is-checked">
                    <span class="el-radio__inner"></span>
                    <input
                      type="radio"
                      aria-hidden="true"
                      tabindex="-1"
                      class="el-radio__original"
                      value="0"
                    />
                  </span>
                  <span class="el-radio__label">
                    <span style="display: inline-block; width: 80px;">
                      请输入链接
                    </span>
                    <input
                      v-model="form.url"
                      type="text"
                      style="outline-style: none; border: 1px solid rgb(187, 187, 187); width: 100%; height: 30px; padding-left: 10px; box-sizing: border-box; border-radius: 4px;"
                    /> </span
                ></label>
              </p>
            </div>
            <div
              style="background: #fff;padding:10px 0;"
              v-if="radio == 'miniprogram'"
            >
              <p style="color: #9A8D8D;margin-left: 30px;">
                订阅者点击该子菜单会跳到以下链接
              </p>
              <div style="display: flex; padding:0 30px;">
                <label style="line-height: 34px; width:120px;"
                  >小程序页面路径</label
                >
                <el-input
                  v-model="form.miniprogramPagepath"
                  placeholder="请输入内容"
                  style="width:70%;"
                ></el-input>
              </div>

              <div style="display: flex; padding:0 30px;">
                <label style="line-height: 34px; width:120px;"
                  >小程序appid</label
                >
                <el-input
                  v-model="form.miniprogramAppid"
                  placeholder="请输入内容"
                  style="width:70%;"
                ></el-input>
              </div>
            </div>
            <div
              style="background: #fff;padding:10px 0;"
              v-if="radio == 'click'"
            >
              <p style="color: #9A8D8D;margin-left: 30px;">
                订阅者点击该子菜单会自动回复以下链接
              </p>
              <div style="display: flex; padding:0 30px;">
                <label style="line-height: 34px; width:75px;">页面地址</label>
                <el-input
                  v-model="inputhttp"
                  placeholder="请输入内容"
                  style="width:70%;"
                ></el-input>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-button style="display: block;margin: 10px auto;" @click="open"
            >打开预览</el-button
          >
          <el-button
            type="primary"
            @click="save"
            style="display: block;margin: 10px auto;"
            >保存</el-button
          >
        </el-col>
      </el-col>
    </el-col>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      wmmPermissions: [],
      deleteName: "删除菜单",
      show1: true,
      show2: false,
      //  menuType: [
      //   {
      //     value: "view",
      //     label: "网页类型"
      //   },
      //   {
      //     value: "click",
      //     label: "点击类型"
      //   },
      //   {
      //     value: "miniprogram",
      //     label: "小程序类型"
      //   }
      // ],
      // 打开预览图
      previewimg: require("../../../static/img/previewimg.png"),
      previewtext: 0,
      openpreview: false,
      // 顶部图
      top: require("../../../static/img/top.png"),
      // 左下角图
      bottom: require("../../../static/img/bottom.png"),
      activeClass: 0,
      addindex: -1,
      input: "",
      miniprogramAppid: "",
      inputhttp: "",
      radio: "view",
      radiobottom: 0,
      shu: 6,
      id: 1,

      list: [
        // {
        //   name: "一级A",
        //   http: "",
        //   id: 1,
        //   list: [
        //     { name: "二级A", http: "https://www.baidu.com/", id: 4 },
        //     { name: "二级A", http: "https://www.baidu.com/", id: 7 }
        //   ]
        // },
        // {
        //   name: "一级B",
        //   http: "",
        //   id: 2,
        //   list: [{ name: "二级B", http: "https://www.baidu.com/", id: 5 }]
        // },
        // {
        //   name: "一级C",
        //   http: "https://www.baidu.com/",
        //   id: 3,
        //   list: []
        // }
      ],
      listlist: [],
      form: {
        id: "",
        fatherId: "",
        menuType: "",
        menuName: "",
        url: "",
        sort: "",
        miniprogramAppid: "",
        miniprogramPagepath: ""
      },
      addDataFlag: false, // 表示我要添加数据
      editDataFlag: false, // 表示我要编辑数据
      level: 1 // 1表示一级菜单 2表示二级菜单 当新增二级菜单时 要先删除一级菜单链接
    };
  },
  created() {
    this.getFatherMenuId();
    this.wmmPermissions = this.permissions;
  },
  mounted() {
    // 获取一级菜单
    // this.rech();
    // this.input = this.list[0].name;
    // this.inputhttp = this.list[0].http;
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      if (newVal == "/wechat-menu-manage") {
        this.wmmPermissions = this.permissions;
      }
    },
    // 刷新浏览器时触发
    permissions: function(newVal, oldVal) {
      this.wmmPermissions = newVal;
    },
    // 直接选择类型 一把用于保存编辑
    radio(newType, oldtype) {
      console.log(newType, oldtype);
      if (newType == "view") {
        this.form.menuType = "view";
        this.form.miniprogramAppid = "";
        this.form.miniprogramPagepath = "";
        this.form.sort = "";
      } else if (newType == "click") {
        this.form.menuType = "click";
      } else if (newType == "miniprogram") {
        this.form.menuType = "miniprogram";
        this.form.url = "";
        this.form.sort = "";
      }
    },
    radiobottom(newNum, oldNum) {
      console.log(newNum, oldNum);
      console.log(this.listlist[newNum]);
      this.form.menuName = this.listlist[newNum].name;
    },
    // 如果 `input` 发生改变，这个函数就会运行
    input: function(newInput, oldInput) {
      console.log(newInput, oldInput);
    },
    inputhttp: function() {
      for (var i = 0; i < this.list.length; i++) {
        for (var j = 0; j < this.list[i].list.length; j++) {
          if (this.list[i].list[j].id === this.id) {
            this.list[i].list[j].http = this.inputhttp;
          }
        }
        if (this.list[i].id === this.id) {
          this.list[i].http = this.inputhttp;
        }
      }
      this.rech();
    }
  },
  methods: {
    // 保存 新增 与 编辑
    save() {
      console.log(this.form);
      if (!("id" in this.form) && this.addDataFlag) {
        if (!this.wmmPermissions.includes("wx:menu:save")) {
          return this.$message.warning({
            duration: 1500,
            message: "你没有新增权限, 请联系管理员"
          });
        }
        // 新增接口
        this.$axios
          .post("/wx/menu", {
            ...this.form
          })
          .then(({ data: res }) => {
            console.log(res);
            if (res.code !== 0) {
              return this.$message.error({
                duration: 1500,
                message: res.msg
              });
            }
            this.$message.success({
              duration: 1500,
              message: "新增成功"
            });
            if (this.addDataFlag) {
              this.show1 = true;
              this.show2 = false;
            }
            this.getFatherMenuId();
          })
          .catch(err => {});
      } else {
        if (!this.wmmPermissions.includes("wx:menu:update")) {
          return this.$message.warning({
            duration: 1500,
            message: "你没有修改权限, 请联系管理员"
          });
        }
        this.form.url = this.listlist[this.radiobottom].http;
        // 保存编辑
        this.$axios.put("/wx/menu", this.form).then(({ data: res }) => {
          console.log(res);
          if (res.code != 0) {
            return this.$message.error({
              duration: 1500,
              message: res.msg
            });
          }
          this.$message.success("操作成功");
          this.getFatherMenuId();
        });
      }
    },
    // 先点击新增 再点击类型
    changeType(type) {
      console.log(type);
      if (this.addDataFlag && type == "view") {
        // 新增 网页类型
        this.show1 = false;
        this.show2 = true;
        this.form.menuType = "view";
      } else if (this.addDataFlag && type == "miniprogram") {
        // 新增 小程序类型
        this.form.menuType = "miniprogram";
      } else if (this.addDataFlag && type == "click") {
        // 新增 点击类型
        this.form.menuType = "click";
      }
      console.log(type);
    },
    getFatherMenuId() {
      return this.$axios.get("/wx/menu/page").then(({ data: res }) => {
        console.log("数据", res);
        if (res.code !== 0) {
          return this.$message.error({
            message: res.msg,
            duration: 1500
          });
        }
        this.listlist = [];
        res.data.forEach(item => {
          if (!item.menuDTOList) {
            this.listlist.push({
              name: item.menuName,
              http: item.url,
              menuDTOList: item.menuDTOList
            });
          } else if (item.menuDTOList) {
            this.listlist.push({
              name: item.menuName,
              http: item.url,
              menuDTOList: item.menuDTOList
            });

            item.menuDTOList.forEach(item => {
              this.listlist.push({
                name: item.menuName,
                http: item.url,
                menuDTOList: item.menuDTOList
              });
            });
          }
        });
        console.log(this.listlist);

        this.list = res.data;
        this.form.menuName = this.list[0].menuName;
        // this.inputhttp = this.list[0].url;
        // console.log(this.inputhttp);
      });
    },

    out() {
      this.openpreview = false;
    },
    open() {
      this.openpreview = true;
    },

    preview(item, index) {
      console.log(item, index);
      this.previewtext = index;
    },
    // 点击父元素
    getItem(item, index) {
      console.log(item, index);
      this.deleteName = "删除菜单";

      this.form.id = item.id;
      this.form.fatherId = item.fatherId;
      this.form.menuType = item.menuType;
      this.form.menuName = item.menuName;
      this.form.url = item.url;
      this.form.sort = item.sort;
      this.form.miniprogramAppid = item.miniprogramAppid;
      this.form.miniprogramPagepath = item.miniprogramPagepath;
      console.log(this.form);
      // this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
      // this.input = item.name;
      // this.inputhttp = item.http;
      // this.id = item.id;
      // this.rech();

      this.addindex = -1;
      this.activeClass = index;
      this.form.menuName = item.menuName;

      var index = this.listlist.findIndex(item => {
        return this.form.menuName == item.name;
      });
      this.radiobottom = index;
      if (item.menuDTOList) {
        // 存在二级菜单
        this.radio = "";
      } else {
        // 不存在二级菜单
        this.radio = item.menuType;
      }
    },
    // 点击子元素
    gettem(item, index) {
      this.deleteName = "删除子菜单";
      console.log(item, index);
      var index1 = this.listlist.findIndex(val => {
        return val.name == item.menuName;
      });
      this.radiobottom = index1;
      this.form.id = item.id;
      this.form.fatherId = item.fatherId;
      this.form.menuType = item.menuType;
      this.form.menuName = item.menuName;
      this.form.url = item.url;
      this.form.sort = item.sort;
      this.form.miniprogramAppid = item.miniprogramAppid;
      this.form.miniprogramPagepath = item.miniprogramPagepath;
      console.log(this.form);
      // this.addindex = index;
      // console.log(item);
      // this.input = item.name;
      // this.inputhttp = item.http;
      // this.id = item.id;
      // this.rech();
      this.addindex = index;
      this.form.menuName = item.menuName;
      this.radio = item.menuType;
      if (this.radio == "miniprogram") {
        this.form.miniprogramAppid = item.miniprogramAppid;
        this.form.miniprogramPagepath = item.miniprogramPagepath;
      } else if (this.radio == "click") {
      }
    },
    // 增加 二级菜单
    add(index) {
      console.log(index);
      // this.shu++;
      // if (this.list[index].menuDTOList == null) {
      //   this.list[index].menuDTOList = [];
      // }
      // this.list[index].menuDTOList.push({
      //   name: "子菜单" + this.shu,
      //   http: "https://www.baidu.com/",
      //   id: this.shu
      // });
      // console.log(this.list[index].menuDTOList);
      // this.rech();

      if (this.list[index].menuDTOList == null) {
        this.list[index].menuDTOList = [];
      }
      delete this.form.id;
      this.addDataFlag = true;
      this.level = 2;
      this.form.menuName = "";
      this.form.miniprogramAppid = "";
      this.form.miniprogramPagepath = "";
      this.form.url = "";
      this.form.fatherId = this.list[index].id;
      this.form.sort = "";
      this.radio = "";

      if (this.list[index].menuDTOList.length < 5) {
        this.list[index].menuDTOList.push({
          // appid: null,
          // createDate: null,
          // creator: null,
          // deleteStatus: null,
          // fatherId: null,
          // id: "4563275",
          // menuDTOList: null,
          // menuKey: null,
          // menuName: "我的二维码",
          // menuType: "view",
          // miniprogramAppid: "",
          // miniprogramPagepath: "",
          // msgtype: null,
          // sort: "1",
          // templateId: null,
          // updateDate: "1603243043393",
          // updater: null,
          // url: "http://wx.bangning.vip"
        });
      }
    },
    // 新增一级菜单
    addtext() {
      // this.shu++;
      // this.list.push({
      //   name: "菜单" + this.shu,
      //   http: "https://www.baidu.com/",
      //   id: this.shu,
      //   list: []
      // });
      // this.rech();

      delete this.form.id;
      this.addDataFlag = true;
      this.level = 1;
      this.form.menuName = "";
      this.form.miniprogramAppid = "";
      this.form.miniprogramPagepath = "";
      this.form.url = "";
      this.form.fatherId = "";
      this.form.sort = "";

      this.radio = "";

      this.list.push({
        // appid: null,
        // createDate: null,
        // creator: null,
        // deleteStatus: null,
        // fatherId: null,
        // id: "4563275",
        // menuDTOList: null,
        // menuKey: null,
        // menuName: "我的二维码",
        // menuType: "view",
        // miniprogramAppid: "",
        // miniprogramPagepath: "",
        // msgtype: null,
        // sort: "1",
        // templateId: null,
        // updateDate: "1603243043393",
        // updater: null,
        // url: "http://wx.bangning.vip"
      });
    },
    // 发布
    publish() {
      this.$confirm("确定要发布吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          var appId = "wxd74edb5408c7d423";
          this.$axios
            .get("/wx/menu/create", {
              params: {
                appId
              }
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error({
                  message: res.msg,
                  duration: 1500
                });
              }

              this.$message.success({
                message: "发布成功",
                duration: 1500
              });
            })
            .catch(err => {});
        })
        .catch(() => {});
    },
    // 删除
    delet() {
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          var item = this.list.find(item => {
            return this.form.id == item.id;
          });
          console.log(item);
          if (item && item.menuDTOList) {
            return this.$message.warning({
              duration: 1500,
              message: "该菜单下包含子菜单不允许删除"
            });
          }
          this.delete(this.form.id);
        })
        .catch(() => {});
    },
    delete(id) {
      this.$axios
        .delete("/wx/menu", {
          data: { id }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error({
              duration: 1500,
              message: res.msg
            });
          }
          this.$message.success("删除成功");
          this.show1 = true;
          this.show2 = false;
          this.getFatherMenuId();
        })
        .catch(() => {});
    },
    rech() {
      this.listlist = [];
      this.list.forEach(item => {
        this.listlist.push({
          name: item.menuName,
          http: item.url
        });
        item.menuDTOList.forEach(item => {
          this.listlist.push({
            name: item.menuName,
            http: item.url
          });
        });
      });
      for (var i = 0; i < this.listlist.length; i++) {
        if (this.listlist[i].name === this.input) {
          this.radiobottom = i;
        }
      }
      console.log(this.listlist);
    }
  }
};
</script>
<style lang="scss" scoped>
* {
  // css页面点击文字出现蓝色底色去掉方法
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.flex {
  position: fixed;
  background: #000000;
  opacity: 0.5;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 99;
}

.preview {
  position: fixed;
  top: 15%;
  left: 45%;
  z-index: 99;
}
.previewcon {
  position: relative;
}
.previewtextbot {
  position: absolute;
  bottom: 98px;
  left: 65px;
  width: 100%;
  font-size: 14px;
}
.previewtext {
  height: 36px;
  line-height: 36px;

  display: block;
  text-decoration: none; //去掉默认下滑线
  color: #999; //设置默认颜色
}
.previewli {
  float: left;
  width: 76px;
  // height: 42px;
  line-height: 38 px;
  border: 1px solid #e7e7eb;
  background: #fafafa;
  text-align: center;
  cursor: pointer;
  color: #999;
  position: relative;
  // margin-bottom: 5px;
  // bottom: 5px;

  // position: relative;
  //   float: left;
  //   line-height: 38px;
  //   text-align: center;
}
.previewlione {
  width: 233px !important;
}
.previewlitwo {
  width: 117px !important;
}
.previewtianjia {
  position: absolute;
  bottom: 58px;
  width: 100%;
  line-height: 36px;
  background: #fafafa;
}

.previewaddadd {
  width: 100%;
  line-height: 36px;
  border: 1px solid #e7e7eb;
  background: #fff;
  height: 36px;
  display: block;
  text-decoration: none; //去掉默认下滑线
  color: #999; //设置默认颜色
}
.previewarrow {
  position: absolute;
  bottom: -15px;
  left: 44%;
  /* 圆角的位置需要细心调试哦 */
  width: 0;
  height: 0;
  font-size: 0;
  border: solid 8px;
  border-color: #fff #e6e6e6 #e6e6e6 #e6e6e6;
}
.warning {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 5px 20px;
}

.on {
  text-align: right;
  float: right;
  color: #1890ff;
}

.tips {
  color: #1890ff;
  font-size: 20px;
  margin-right: 10px;
}

.left {
  min-width: 390px;
  min-height: 550px;
  position: relative;
  padding-left: 40px;
}

.top {
  position: absolute;
  top: 0px;
  width: 320px;
  height: 70px;
  text-align: center;
  span {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -15px);
    font-size: 14px;
    color: #fff;
  }
}

.bottom {
  height: 30px;
  width: 30px;
}

.textbot {
  position: absolute;
  bottom: -5px;
  left: 75px;
  width: 100%;
  font-size: 14px;
}

.active {
  border: 1px solid #44b549 !important;
  color: #44b549 !important;
}

.li {
  float: left;
  width: 93px;
  line-height: 48px;
  border: 1px solid #e7e7eb;
  background: #fafafa;
  text-align: center;
  cursor: pointer;
  color: #999;
  position: relative;
}
.text {
  height: 50px;
}
.text:hover {
  color: #000;
}

.add {
  position: absolute;
  bottom: 65px;
  width: 100%;
  line-height: 48px;
  border: 1px solid #e7e7eb;
  background: #fafafa;
}
.arrow {
  position: absolute;
  bottom: -16px;
  left: 36px;
  /* 圆角的位置需要细心调试哦 */
  width: 0;
  height: 0;
  font-size: 0;
  border: solid 8px;
  border-color: #fff #f4f5f9 #f4f5f9 #f4f5f9;
}
.tianjia {
  position: absolute;
  bottom: 115px;
  width: 100%;
  line-height: 48px;
  background: #fafafa;
}

.addadd {
  width: 100%;
  line-height: 48px;
  border: 1px solid #e7e7eb;
  background: #fafafa;
  height: 48px;
}

.right {
  background: #f4f5f9;
  min-height: 550px;
}
</style>
